<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>💗</title>
    <style type="text/css">
        /* 原有动画样式完全保留 */
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #pinkboard {
            animation: anim 1.5s ease-in-out infinite;
            -webkit-animation: anim 1.5s ease-in-out infinite;
            -o-animation: anim 1.5s ease-in-out infinite;
            -moz-animation: anim 1.5s ease-in-out infinite;
        }

        @keyframes anim {
            0% { transform: scale(0.8); }
            25% { transform: scale(0.7); }
            50% { transform: scale(1); }
            75% { transform: scale(0.7); }
            100% { transform: scale(0.8); }
        }

        @-webkit-keyframes anim {
            0% { -webkit-transform: scale(0.8); }
            25% { -webkit-transform: scale(0.7); }
            50% { -webkit-transform: scale(1); }
            75% { -webkit-transform: scale(0.7); }
            100% { -webkit-transform: scale(0.8); }
        }

        @-o-keyframes anim {
            0% { -o-transform: scale(0.8); }
            25% { -o-transform: scale(0.7); }
            50% { -o-transform: scale(1); }
            75% { -o-transform: scale(0.7); }
            100% { -o-transform: scale(0.8); }
        }

        @-moz-keyframes anim {
            0% { -moz-transform: scale(0.8); }
            25% { -moz-transform: scale(0.7); }
            50% { -moz-transform: scale(1); }
            75% { -moz-transform: scale(0.7); }
            100% { -moz-transform: scale(0.8); }
        }

        #name {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 46px;
            color: pink;
            text-align: center;
            white-space: nowrap;
            user-select: none;
        }

        @media (max-width: 768px) {
            #name {
                font-size: 8vw;
                margin-top: 0;
            }
        }

        #audioControl {
            /* 原有音频控件样式保持 */
            position: fixed;
            bottom: 15px;
            right: 15px;
            z-index: 1000;
            opacity: 0.3;
            transition: opacity 0.3s;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .play-btn {
            /* 播放按钮样式保持 */
            width: 24px;
            height: 24px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M8 5v14l11-7z"/></svg>') no-repeat center;
        }

        .play-btn.paused {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="pink" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
        }
    </style>
</head>

<body>
    <!-- 音频控件 -->
    <div id="audioControl" onclick="togglePlay()">
        <div class="play-btn"></div>
        <audio id="bgMusic" loop>
            <source src="music/birthday_song.mp3" type="audio/mpeg">
        </audio>
    </div>

    <canvas id="pinkboard"></canvas>
    <div id="name">❤小周生日快乐❤</div>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
        // 动态爱心粒子系统（完全保留）
        const colors = [
            "#eec996","#8fb7d3","#b7d4c6","#c3bedd",
            "#f1d5e4","#cae1d3","#f3c89d","#d0b0c3",
            "#819d53","#c99294","#cec884","#ff8e70",
            "#e0a111","#fffdf6","#cbd7ac","#e8c6c0",
            "#dc9898","#ecc8ba"
        ];

        let canvas, ctx, ww, wh, hearts;

        function initCanvas() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            const dpr = window.devicePixelRatio || 1;
            ww = window.innerWidth;
            wh = window.innerHeight;
            
            canvas.width = ww * dpr;
            canvas.height = wh * dpr;
            canvas.style.width = ww + 'px';
            canvas.style.height = wh + 'px';
            ctx.scale(dpr, dpr);
        }

        function Heart() {
            this.x = Math.random() * ww;
            this.y = Math.random() * wh;
            this.opacity = Math.random() * 0.5 + 0.5;
            this.vel = {
                x: (Math.random() - 0.5) * 4,
                y: (Math.random() - 0.5) * 4,
            };
            this.targetScale = Math.random() * 0.15 + 0.02;
            this.scale = this.targetScale * Math.random();
            this.width = 470;
            this.height = 400;
        }

        Heart.prototype.update = function(i) {
            this.x += this.vel.x;
            this.y += this.vel.y;

            this.scale += (this.targetScale - this.scale) * 0.01;
            if (this.x - this.width > ww || this.x + this.width < 0) {
                this.scale = 0;
                this.x = Math.random() * ww;
            }
            if (this.y - this.height > wh || this.y + this.height < 0) {
                this.scale = 0;
                this.y = Math.random() * wh;
            }
        };

        Heart.prototype.draw = function(i) {
            ctx.globalAlpha = this.opacity;
            ctx.font = `${180 * this.scale}px "微软雅黑"`;
            ctx.fillStyle = colors[i % 18];
            ctx.fillText(
                "❤小周天天开心❤",
                this.x - this.width * 0.5,
                this.y - this.height * 0.5,
                this.width,
                this.height
            );
        };

        function initHearts() {
            hearts = [];
            const count = window.innerWidth < 768 ? 50 : 100;
            for(let i = 0; i < count; i++) {
                hearts.push(new Heart());
            }
        }

        function animate() {
            ctx.clearRect(0, 0, ww, wh);
            hearts.forEach((heart, i) => {
                heart.update(i);
                heart.draw(i);
            });
            requestAnimationFrame(animate);
        }

        // 窗口大小变化处理
        window.addEventListener('resize', () => {
            initCanvas();
            initHearts();
        });

        // 音频控制
        const audio = document.getElementById('bgMusic');
        const playBtn = document.querySelector('.play-btn');

        function togglePlay() {
            audio.paused ? audio.play() : audio.pause();
            playBtn.classList.toggle('paused', !audio.paused);
        }

        // 首次交互处理
        const handleFirstInteraction = () => {
            audio.play().catch(console.error);
            document.removeEventListener('touchstart', handleFirstInteraction);
            document.removeEventListener('click', handleFirstInteraction);
        };

        document.addEventListener('touchstart', handleFirstInteraction, { once: true });
        document.addEventListener('click', handleFirstInteraction, { once: true });

        // 初始化
        initCanvas();
        initHearts();
        animate();
    </script>

    <script>
        // 动态爱心核心动画（完全保留）
        (function(canvas) {
            const context = canvas.getContext("2d");
            const dpr = window.devicePixelRatio || 1;
            let particles, particleRate, time;

            const settings = {
                particles: {
                    length: 500,
                    duration: 4,
                    velocity: 100,
                    effect: -0.75,
                    size: 30
                }
            };

            // 动态调整参数
            if(window.innerWidth < 768) {
                settings.particles.length = 200;
                settings.particles.size = 20;
            }

            function initCanvas() {
                canvas.width = window.innerWidth * dpr;
                canvas.height = window.innerHeight * dpr;
                canvas.style.width = window.innerWidth + 'px';
                canvas.style.height = window.innerHeight + 'px';
                context.scale(dpr, dpr);
            }

            class Point {
                constructor(x, y) {
                    this.x = x || 0;
                    this.y = y || 0;
                }
                clone() { return new Point(this.x, this.y); }
                length(len) {
                    if(!len) return Math.sqrt(this.x**2 + this.y**2);
                    const ratio = len / this.length();
                    this.x *= ratio;
                    this.y *= ratio;
                    return this;
                }
            }

            function pointOnHeart(t) {
                return new Point(
                    160 * Math.pow(Math.sin(t), 3),
                    130 * Math.cos(t) - 
                    50 * Math.cos(2*t) - 
                    20 * Math.cos(3*t) - 
                    10 * Math.cos(4*t) + 25
                );
            }

            // 创建粒子图像
            const heartImage = (() => {
                const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");
                canvas.width = settings.particles.size;
                canvas.height = settings.particles.size;
                
                ctx.beginPath();
                let t = -Math.PI;
                let point = pointOnHeart(t);
                ctx.moveTo(point.x, point.y);
                while(t < Math.PI) {
                    t += 0.01;
                    point = pointOnHeart(t);
                    ctx.lineTo(point.x, point.y);
                }
                ctx.closePath();
                ctx.fillStyle = "pink";
                ctx.fill();
                
                const img = new Image();
                img.src = canvas.toDataURL();
                return img;
            })();

            class Particle {
                constructor() {
                    this.position = new Point();
                    this.velocity = new Point();
                    this.acceleration = new Point();
                    this.age = 0;
                }
                initialize(x, y, dx, dy) {
                    this.position.x = x;
                    this.position.y = y;
                    this.velocity.x = dx;
                    this.velocity.y = dy;
                    this.acceleration.x = dx * settings.particles.effect;
                    this.acceleration.y = dy * settings.particles.effect;
                    this.age = 0;
                }
                update(deltaTime) {
                    this.position.x += this.velocity.x * deltaTime;
                    this.position.y += this.velocity.y * deltaTime;
                    this.velocity.x += this.acceleration.x * deltaTime;
                    this.velocity.y += this.acceleration.y * deltaTime;
                    this.age += deltaTime;
                }
                draw() {
                    const progress = this.age / settings.particles.duration;
                    const size = heartImage.width * (1 - progress**3);
                    context.globalAlpha = 1 - progress;
                    context.drawImage(
                        heartImage,
                        this.position.x - size/2,
                        this.position.y - size/2,
                        size,
                        size
                    );
                }
            }

            class ParticlePool {
                constructor(length) {
                    this.particles = Array.from({length}, () => new Particle());
                    this.firstActive = 0;
                    this.firstFree = 0;
                }
                add(x, y, dx, dy) {
                    this.particles[this.firstFree].initialize(x, y, dx, dy);
                    this.firstFree = (this.firstFree + 1) % this.particles.length;
                    if(this.firstActive === this.firstFree) {
                        this.firstActive = (this.firstActive + 1) % this.particles.length;
                    }
                }
                update(deltaTime) {
                    let i;
                    if(this.firstActive <= this.firstFree) {
                        for(i = this.firstActive; i < this.firstFree; i++) {
                            this.particles[i].update(deltaTime);
                        }
                    } else {
                        for(i = this.firstActive; i < this.particles.length; i++) {
                            this.particles[i].update(deltaTime);
                        }
                        for(i = 0; i < this.firstFree; i++) {
                            this.particles[i].update(deltaTime);
                        }
                    }
                    while(
                        this.particles[this.firstActive].age >= settings.particles.duration &&
                        this.firstActive !== this.firstFree
                    ) {
                        this.firstActive = (this.firstActive + 1) % this.particles.length;
                    }
                }
                draw() {
                    let i;
                    if(this.firstActive <= this.firstFree) {
                        for(i = this.firstActive; i < this.firstFree; i++) {
                            this.particles[i].draw();
                        }
                    } else {
                        for(i = this.firstActive; i < this.particles.length; i++) {
                            this.particles[i].draw();
                        }
                        for(i = 0; i < this.firstFree; i++) {
                            this.particles[i].draw();
                        }
                    }
                }
            }

            function render() {
                requestAnimationFrame(render);
                
                const now = Date.now() / 1000;
                const deltaTime = now - (time || now);
                time = now;

                context.clearRect(0, 0, canvas.width, canvas.height);

                // 生成新粒子
                const amount = particleRate * deltaTime;
                for(let i = 0; i < amount; i++) {
                    const pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
                    const dir = pos.clone().length(settings.particles.velocity);
                    particles.add(
                        canvas.width/(2*dpr) + pos.x,
                        canvas.height/(2*dpr) - pos.y,
                        dir.x,
                        -dir.y
                    );
                }

                particles.update(deltaTime);
                particles.draw();
            }

            // 初始化
            initCanvas();
            particles = new ParticlePool(settings.particles.length);
            particleRate = settings.particles.length / settings.particles.duration;
            render();

            // 响应式处理
            window.addEventListener('resize', () => {
                initCanvas();
                if(window.innerWidth < 768) {
                    settings.particles.length = 200;
                    settings.particles.size = 20;
                } else {
                    settings.particles.length = 500;
                    settings.particles.size = 30;
                }
                particles = new ParticlePool(settings.particles.length);
                particleRate = settings.particles.length / settings.particles.duration;
            });

        })(document.getElementById("pinkboard"));
    </script>

</body>

</html>